<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<link rel='stylesheet' type='text/css' href="Css/Main.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Enregistrement SupTracking</title>
<!-- Style Sheets -->
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/templatemo_misc.css">
<link rel="stylesheet" href="css/templatemo_style.css">
<link rel="stylesheet" href="css/styles.css">
<!-- JavaScripts -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/jquery.singlePageNav.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.lightbox.js"></script>
<script src="js/templatemo_custom.js"></script>
<script src="js/responsiveCarousel.min.js"></script>
</head>
<body>

<div class="slider-caption">
    <div class="templatemo_homewrapper">
	</div>
	</div>

	<form class="subscribe" name="frm" action="Register" method="post">
		<div>
			<div class="require">
<p>
					<label for="username">Username :</label> <input type="text"
						id="username" name="username" required />
				</p>
				
				<p>
					<label for="mail">Adresse mail :</label> <input type="text"
						id="mail" name="mail" required />
				</p>
				<p>
					<label for="adresse">Adresse postale :</label> <input type="text"
						id="adresse" name="adresse" required />
				</p>

				<p>
					<label for="password">Password:</label> <input type="password"
						id="password" name="password" onkeyup="checkPass(); return false;"
						required />
				</p>
				<p>
					<label for="confirmation">Confirmation de password:</label> <input
						type="password" id="confirmation" name="confirmation"
						onkeyup="checkPass(); return false;" required />
				</p>
				<p>
					<label for="lastname">Last Name :</label> <input type="text"
						id="lastname" name="lastname" required />
				</p>
				<p>
					<label for="firstname">First Name :</label> <input type="text"
						id="firstname" name="firstname" required />
				</p>

				<p>
					<label for="creditcard">Credit Card :</label> <input type="text"
						id="creditcard" name="creditcard" required />
				</p>
				<p>
					<label for="tel">tel :</label> <input type="tel"
						id="tel" name="tel" required />
				</p>




			</div>

			<div class="conditionPart">
				<INPUT type="checkbox" name="chk" id="conditionUtil" value="1"
					onClick="apply()">J'acceptes les <a href="#">conditions
					d'utilisation</a> de SupTracking
			</div>
			<p>
				<input type="submit" id="buttonsub" name="sub" value="Valider"
					disabled>
			</p>
		</div>

	</form>
	
	
	<script type="text/javascript">
		var contionTestPwd = false;

		function apply() {
			document.frm.sub.disabled = true;
			if (document.frm.chk.checked == true) {
				document.frm.sub.disabled = false;
			}
			if (document.frm.chk.checked == false) {
				document.frm.sub.enabled = false;
			}
		}
	</script>
	<script>
		function checkPass() {
			//Store the password field objects into variables ...
			var pass1 = document.getElementById('password');
			var pass2 = document.getElementById('confirmation');
			document.getElementById("myCheck").disabled = true;
			//Store the Confimation Message Object ...
			//Set the colors we will be using ...
			var goodColor = "#66cc66";
			var badColor = "#ff6666";
			var none = "#ffffff"
			//Compare the values in the password field 
			//and the confirmation field
			if (pass1.value == pass2.value) {
				//The passwords match. 
				//Set the color to the good color and inform
				//the user that they have entered the correct password 
				pass2.style.backgroundColor = goodColor;
				pass1.style.backgroundColor = goodColor;
				message.style.color = goodColor;
				document.getElementById("conditionUtil").enabled = true;
			} else {
				//The passwords do not match.
				//Set the color to the bad color and
				//notify the user.
				pass2.style.backgroundColor = badColor;
				pass1.style.backgroundColor = none;
				message.style.color = badColor;
				pass1
						.setCustomValidity('Les mots de passe ne sont pas identiques');
				document.getElementById("conditionUtil").enabled = false;
			}
		}
	</script>

</body>
</html>